<template>
  <header class="travel-header">
    <div class="container-fluid px-0">
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary py-3 animate__animated animate__fadeInDown">
        <a class="navbar-brand fw-bold fs-3" href="#">
          <i class="bi bi-airplane-engines me-2"></i>
          TravelGo
        </a>
        
        <button 
          class="navbar-toggler" 
          type="button" 
          data-bs-toggle="collapse" 
          data-bs-target="#nav-collapse"
          aria-controls="nav-collapse"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="nav-collapse">
          <div class="navbar-nav me-auto ms-lg-4">
            <a class="nav-link active px-3" href="#">首页</a>
            <a class="nav-link px-3" href="#">目的地</a>
            <a class="nav-link px-3" href="#">特价旅游</a>
            <a class="nav-link px-3" href="#">关于我们</a>
            <a class="nav-link px-3" href="#">联系我们</a>
          </div>
          
          <div class="navbar-nav ms-auto align-items-center">
            <a class="nav-link d-flex align-items-center" href="#">
              <i class="bi bi-person-circle me-2 fs-5"></i>
              <span>登录/注册</span>
            </a>
          </div>
        </div>
      </nav>
    </div>
  </header>
</template>

<script setup>
</script>

<style scoped>
.travel-header .navbar {
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
  box-shadow: 0 4px 20px rgba(13, 110, 253, 0.3);
}

.travel-header .navbar-brand {
  color: #ffffff !important;
  font-weight: 700;
  transition: color 0.3s ease;
}

.travel-header .navbar-brand:hover {
  color: #e9ecef !important;
}

.travel-header .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  margin: 0 2px;
}

.travel-header .nav-link:hover,
.travel-header .nav-link.active {
  color: #ffffff !important;
}

.travel-header .nav-link:hover::after,
.travel-header .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ffffff;
  border-radius: 3px;
}

.travel-header .navbar-toggler {
  border: none;
  outline: none;
  box-shadow: none;
}

.travel-header .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

@media (max-width: 991.98px) {
  .travel-header .navbar-nav {
    text-align: center;
    padding: 1rem 0;
  }
  
  .travel-header .nav-link::after {
    display: none;
  }
  
  .travel-header .navbar-collapse {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
}
</style>